import React, { Component } from 'react'
import {
  BrowserRouter as Router,
  Route,
  Link,
  useLocation,
  Redirect,
  Switch,
  NavLink
} from 'react-router-dom'
import './style.css'

import City from './City'


const CustomLink = (props) => {
  return (
    <li>
      <Link to={props.path}>{props.name}</Link>
    </li>
  )
}

export default class index extends Component {
  render() {
    return (
      <Router>
        <ul>
          <CustomLink path="/index" name="首页"></CustomLink>
          <NavLink activeClassName="selected" to="/movie">电影</NavLink>
          <Link to="/profile">我的</Link>
          <City path="/city"></City>
          <Route path="/setting" children={(props)=>{
            console.log(props)
            return <Link className={props.match?'selected':''} to="/setting">设置</Link>
          }}></Route>
        </ul>


        <hr />

        <Route exact path="/city">
          <h1>城市</h1>
        </Route>

      </Router>
    )
  }
}
